<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<title></title>
		<style type="text/css">
			#a{
				width: 200px;
				height: 200px;
				padding: 30px;
				background-color: lightblue;
			}
			#b{
				width: 100px;
				height: 100px;
				padding: 30px;
				background-color: lightcoral;
			}
			#c{
				width: 50px;
				height: 50px;
				padding: 30px;
				background-color: lightpink
			}
		</style>
	</head>
	<body>
		<div id="a">
			a
			<div id="b">
				b
				<div id="c">
				c						
				</div>
			</div>
		</div>
		<script type="text/javascript">
			
			
			// 冒泡  当你点击c的时候   里面传递到外面 	C ->   b -> a
			// a.onclick = function(){
			// 	alert("a");
			// }
			// b.onclick = function(){
			// 	alert("b");
			// }
			// c.onclick = function(){
			// 	alert("c");
			// }
			
			// true 捕获  	外面先捕获处理再传递到内部	a -> b -> c
			// false 冒泡	c -> b -> a
			a.addEventListener("click",function(){alert("a")},true);// true 捕获  false 冒泡
			b.addEventListener("click",function(){alert("b");event.stopPropagation()},true);
			c.addEventListener("click",function(){alert("c")},true);


			// 停止传递事件  event.stopPropagation()
			// 停止执行元素的默认行为  event.preventDefault();
			// input[type=text]元素keyDown()事件中如果执行event.preventDefault(); 按键的内容不会放入输入框
			
			
		</script>
	</body>
</html>
